<template>
  <div>
    <Box>
      <h2 style="margin: 10px 15px" slot="title">上报基本信息</h2>
      <div slot="box">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="案(事)件名称" prop="eventName">
            <a-input v-model="form.eventName" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="发生日期" prop="occurrenceDate">
            <a-date-picker v-model="form.occurrenceDate" valueFormat="YYYY-MM-DD" />
          </a-form-model-item>
          <a-form-model-item label="发生地" prop="occurrencePlace">
            <a-select v-model="form.occurrencePlace" placeholder="请选择发生地">
                <a-select-option v-for="(item, index) in diqu" :value="item.name" :key="index">
                  {{ item.fullName }}
                </a-select-option>
              </a-select>
          </a-form-model-item>

          <a-form-model-item label="发生地详址" prop="detailedAddressOccurrence">
            <a-select v-model="form.detailedAddressOccurrence" :show-search="true" :allowClear="false"
              :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null"
              style="width: 100%" placeholder="请输入" @search="onSearch" @change="onChange1">
              <a-select-option v-for="(item, key) in positionList" :key="key" :value="item">{{
                item.address
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="经纬度" prop="ll">
            <a-input v-model="form.longitude" style="width: 45%" placeholder="经度" />
            <a-input v-model="form.latitude" style="width: 45%;margin-left: 10%" placeholder="纬度" />
          </a-form-model-item>
          <a-form-model-item label="案事件分级" prop="eventLevel">
            <a-select v-model="form.eventLevel" style="width: 100%" placeholder="请选择" @change="handleChange1">
              <a-select-option value="01">
                {{ this.filterMultiDictText('cases_level', '01') }}
              </a-select-option>
              <a-select-option value="02">
                {{ this.filterMultiDictText('cases_level', '02') }}
              </a-select-option>
              <a-select-option value="03">
                {{ this.filterMultiDictText('cases_level', '03') }}
              </a-select-option>
              <a-select-option value="04">
                {{ this.filterMultiDictText('cases_level', '04') }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="案事件类型" prop="eventType">
            <a-select v-model="form.eventType" placeholder="请选择" style="width: 100%" @change="handleChange2">
              <a-select-option value="01">
                {{ this.filterMultiDictText('cases_type', '01') }}
              </a-select-option>
              <a-select-option value="02">
                {{ this.filterMultiDictText('cases_type', '02') }}
              </a-select-option>
              <a-select-option value="03">
                {{ this.filterMultiDictText('cases_type', '03') }}
              </a-select-option>
              <a-select-option value="04">
                {{ this.filterMultiDictText('cases_type', '04') }}
              </a-select-option>
              <a-select-option value="99">
                {{ this.filterMultiDictText('cases_type', '99') }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="案事件情况" prop="situation">
            <a-textarea v-model="form.situation" placeholder="至少输入五个字符" :auto-size="{ minRows: 3, maxRows: 5 }" />
          </a-form-model-item>
          <a-form-model-item label="上传附件">
            <j-upload v-model="fileListStr" />
            <div style="color: #b1b1b1"> 支持扩展名：.rar .zip .doc .docx .pdf .jpg... </div>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">
              提交
            </a-button>
            <a-button style="margin-left: 10px;" @click="resetForm">
              取消
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </Box>
    <Map ref="mapDrawId" @pisitionList="onPisitionList" />
  </div>
</template>

<script>
import Input from '@/views/xlgc/lawCase/LifeCase/detailed/ImportModal'
import Box from '@views/xlgc/Box'
import { getDictItemsFromCache } from '@api/api'
import { getfrom, getMDlist, updataTeli, updataZDsb, updateDisputesZ } from '@api/xlgc/lawCase'
import Map from '@/views/xlgc/modules/map'
export default {
  name: 'upload',
  components: { Box, Input, Map },
  data() {
    return {
      positionList: [],
      diqu: [],
      // fileLists: [],
      fileListStr: "",
      labelCol: { span: 4 },
      wrapperCol: { span: 6 },
      other: '',
      visible: false,
      form: {
        detailedAddressOccurrence: "",
        eventLevel: undefined,
        eventName: "",
        eventType: undefined,
        latitude: undefined,
        longitude: undefined,
        occurrenceDate: "",
        occurrencePlace: undefined,
        situation: "",
      },
      niTitle: [],
      updatas: {},
      rules: {
        eventName: [{ required: true, message: '请输入案事件名称', trigger: 'change' },],
        occurrenceDate: [{ required: true, message: '请选择发生日期', trigger: 'change' }],
        occurrencePlace: [{ required: true, message: '请输入发生地', trigger: 'change' }],
        detailedAddressOccurrence: [{ required: true, message: '请输入发生地详细地址', trigger: 'change' }],
        eventLevel: [{ required: true, message: '请选择案事件分级', trigger: 'change' }],
        eventType: [{ required: true, message: '请选择案事件类型', trigger: 'change' }],
        situation: [
          { required: true, message: '请描述案事件情况', trigger: 'change' },
          { min: 5, message: '不少于五个字符', trigger: 'blur' },
        ],
      },
      bal: false,
      identification: false
    };
  },
  mounted() {
    getfrom()
      .then(res => {
        console.log(res)
        this.diqu = res.result
      })
      .catch(e => {
        this.$message.warn('请求失败！')
      })
    if (this.$route.query.id) {
      this.identification = true
      // alert(6)
      this.institutionZ({ id: this.$route.query.id, type: '重特大案事件' })
    }
  },
  methods: {
    // nameTitle(val){
    //   this.bal = true
    //   this.niTitle = val
    // },
    institutionZ(val) {
      updataTeli(val)
        .then(response => {
          console.log(response)
          this.form = response.result.events
          this.fileListStr = response.result.fileList
          // console.log(this.control)
          // this.nodeVOS = response.result.nodeVo
          // this.party = response.result.safety
        })
        .catch(error => {
          reject(error)
        })

    },
    onPisitionList(arr) {
      console.log(arr)
      this.positionList = arr
    },
    onSearch(val) {
      console.log(val)
      if (val == '') {
        return
      }
      this.$refs.mapDrawId.getPositionList(val)
    },
    onChange1(val) {
      if (val != undefined) { }
      console.log(val)
      this.form.detailedAddressOccurrence = val.address
      this.form.latitude = val.latitude
      this.form.longitude = val.longitude
    },
    onSubmit() {
      this.updatas = Object.assign({}, { events: this.form })
      console.log(this.fileListStr)
      if (this.fileListStr.length > 0) {
        this.updatas = Object.assign(this.updatas, { fileList: this.fileListStr.split(',') })
      }
      console.log(this.updatas)
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (!this.identification) {
            this.refreshTable(this.updatas)
          } else {
            updateDisputesZ(this.updatas).then(src => {
              if (src.success) {
                this.$message.success('修改成功', 2)
                this.$router.push({
                  path: '/mine/list'
                })
              } else {
                this.$message.error('修改失败，请仔细核对后再次添加')
              }
            }).catch(err => {
              console.log(err)
            })
          }
        } else {
          this.$message.error('您此页的数据还没有填写完整,无法提交');
          return false;
        }
      })
    },
    handleOk() {
      this.$refs.inpute.handleOk()
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    handleChange1(val) {
      this.form.eventLevel = val
      return val
    },
    handleChange2(val) {
      this.form.eventType = val
      return val
    },
    refreshTable(val) {
      this.loading = true
      updataZDsb(val)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.$message.success('上报成功', 2,);
            this.$router.push({ path: '/mine/list' })
          } else {

          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
  },
  watch: {
    // fileLists: {
    //   deep: true,
    //   handler(a, b) {
    //     // console.log(this.form)
    //     this.updatas = Object.assign({}, this.updatas, { fileList: this.fileLists })
    //   }
    // },
    niTitle: {
      deep: true,
      handler(a, b) {
        this.niTitle = a
      }
    }
  }
}
</script>

<style scoped></style>